<template>
<div>
  <el-row class="row" type="flex" justify="start">
  <el-col class="top-left" :span="10" :push="3">
    <span>您好，欢迎光临特步官方商城！</span>
    <span>注册</span>&nbsp;&nbsp;&nbsp;<span>登录</span>
  </el-col>
  <el-col class="top-right" :span="6" :push="7">
    <span>我的鞋子</span>
    <span>品牌官网</span>
    <span>购物车&nbsp;&nbsp;<i class="el-icon-shopping-cart-2"></i></span>
  </el-col>
  </el-row>
  <el-row class="login-body" type="flex" justify="center">
  <el-col class="logo" :span="4"><span>绿竹鞋庄</span></el-col>
  <el-col class="serch" :span="8" :offset="2" :pull="1"><el-input class="serch-input" v-model="serach" placeholder="请输入要搜索的内容"></el-input><el-button class="button" icon="el-icon-search">搜索</el-button></el-col>
  <el-col class="erweima" :span="4"><img src="../assets/img/login/erweima.jpg"></el-col>
  </el-row>
  <el-row class="login-nav" type="flex" justify="center">
    <span v-for="(item,index) in navs" :key="index">{{item}}</span>
  </el-row>
  <el-dialog
    title="注册中心"
    :visible.sync="dialog"
    width="35%"
    custom-class="demo-drawer"
    >
    <el-form ref="register" :model="params" :rules="ruless" resetFields>
      <el-form-item label="手机号码" prop="account">
        <el-input placeholder="请输入账号" v-model="params.account"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请输入密码" v-model="params.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input placeholder="请输入手机号" v-model="params.phone"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClose" type="danger">取消注册</el-button>
        <el-button type="primary" @click="registerUser('register')">立即注册</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-row class="login-bg" type="flex" justify="center" align="middle">
    <el-col class="form-box">
      <el-row class="title" align="middle" type="flex" justify="center"><h3>手机验证登录</h3></el-row>
      <el-row type="flex" justify="center" align="middle" class="form-body">
        <el-col :offset="1">
          <el-form ref="loginForm" :rules="rules" :model="user">
            <el-form-item prop="account"><el-input v-model="user.account" prefix-icon="el-icon-user-solid" placeholder="请输入手机号码" class="input" clearable></el-input></el-form-item>
            <el-form-item prop="Strcode"><el-input v-model="user.Strcode" prefix-icon="el-icon-s-goods" placeholder="请输入验证码" clearable class="verifi"></el-input><el-button type="warning" @click="test('loginForm')">发送验证请求</el-button></el-form-item>
            <span class="register" @click.prevent="dialog = true">免费注册</span><span href="javascript:;" class="findpwd" @click.prevent="te">忘记密码?</span>
            <el-form-item><el-button class="login-btn" type="danger" @click="login('loginForm')">登录</el-button></el-form-item>
            <p>其他登录方式：<span class="QQ">QQ</span><span class="WX">微信</span></p>
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row class="login-server" type="flex" justify="center">
    <el-col :span="16" class="login-server-left">
      <ul class="fl">
        <h3>关于我们</h3>
        <li>公司简介</li>
        <li>联系我们</li>
      </ul>
      <ul class="fl">
        <h3>购物指南</h3>
        <li>常见问题</li>
        <li>用户注册</li>
        <li>购物流程</li>
      </ul>
      <ul class="fl">
        <h3>售后服务</h3>
        <li>配送方式</li>
        <li>防伪查询</li>
      </ul>
    </el-col>
    <el-col :span="2">
    <el-divider direction="vertical"></el-divider>
    </el-col>
    <el-col :span="6" class="login-server-right">
      <h2>400-008-7666</h2>
      <p>周一至周日 8:30-21:30</p>
      <img src="../assets/img/login/zxkf1.png"/>
      <p>周一至周日 9:00-23:00</p>
    </el-col>
  </el-row>
  <el-row class="footer-img" type="flex" justify="center">
    <img src="../assets/img/login/x-footer.jpg"/>
  </el-row>
  <el-row class="footer" type="flex" justify="center">
    <el-col :span="12">
      <ul>
        <li>关于我们</li>
        <el-divider direction="vertical" class="dl"></el-divider>
        <li>人才招聘</li>
        <el-divider direction="vertical" class="dl"></el-divider>
        <li>帮助中心</li>
        <el-divider direction="vertical" class="dl"></el-divider>
        <li>友情联接</li>
        <el-divider direction="vertical" class="dl"></el-divider>
        <li>联系我们</li>
      </ul>
      <p>绿竹鞋庄 Copyright 2011  运动服 All Rights Reserved ICP：XICP备xxxxxxx号-1 绿竹鞋庄官网专卖店 </p>
    </el-col>
  </el-row>
</div>
</template>
<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    let checkPhone = (rule, value, callback) => {
      let phoneReg = /^1[3456789]\d{9}$/
      if (!phoneReg.test(value)) {
        return callback(new Error('账号必需为手机号格式!'))
      }
      callback()
    }
    let checkPwd = (rule, value, callback) => {
      let pwdReg = /^[a-z0-9_-]{6,18}$/
      if (!pwdReg.test(value)) {
        return callback(new Error('请输入六位数以上的字符'))
      }
      callback()
    }
    return {
      action: {
        registerUser: 'shoes_Web_exploded/User/addUser',
        login: 'shoes_Web_exploded/User/codeLogin',
        sendmessage: 'shoes_Web_exploded/Send/sendCode'
      },
      navs: ['首页', '跑步', '篮球鞋', '男鞋', '女鞋', '儿童', '品牌'],
      dialog: false,
      direction: 'rtl',
      user: {
        account: '',
        Strcode: ''
      },
      params: {
        account: '',
        password: '',
        phone: ''
      },
      rules: {
        account: [{
          required: true, message: '手机号不能为空', trigger: 'blur'
        },
        {
          validator: checkPhone, trigger: 'blur'
        }]
      },
      ruless: {
        account: [
          {
            required: true, message: '账号不能为空', trigger: 'blur'
          },
          {
            validator: checkPhone, trigger: 'blur'
          }],
        password: [{
          required: true, message: '请输入正确的密码', trigger: 'blur'
        },
        {
          validator: checkPwd, trigger: 'blur'
        }],
        phone: [
          {
            required: true, message: '手机号不能为空', trigger: 'blur'
          },
          {
            validator: checkPhone, trigger: 'blur'
          }]
      },
      serach: ''
    }
  },
  components: {

  },
  computed: {

  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    login (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          let params = {
            phone: this.user.account,
            Strcode: this.user.Strcode
          }
          http.xhrPost(this, this.action.login, params, (result) => {
            console.log(result)
            this.$message({
              type: 'success',
              message: result.message,
              duration: 1000
            })
            sessionStorage.setItem('user_name', result.data.name)
            sessionStorage.setItem('user_id', result.data.user_id)
            sessionStorage.setItem('head_url', result.data.head_url)
            this.$router.push('/home')
          })
        }
      })
    },
    registerUser (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          let params = this.params
          http.xhrPost(this, this.action.registerUser, params, (res) => {
            this.$message({
              type: 'success',
              message: res.message
            })
            this.isShow = false
            this.getUserList()
            this.params = {
              account: '',
              password: '',
              phone: ''
            }
          })
        }
      })
    },
    test (refName) {
      this.$refs[refName].validate((valid) => {
        if (valid) {
          let param = {
            'phone': this.user.account
          }
          http.xhrPost(this, this.action.sendmessage, param, (res) => {
            this.$message({
              type: 'success',
              message: '发送成功，请注意查收'
            })
            console.log(res)
          })
        }
      })
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss">
  @import '../assets/style/common.scss';
  .row {
    height: 4.2%;
    line-height: 30px;
    vertical-align: middle;
    color: #000;
    background: #fafafa;
    .top-left {
      span {
        margin-left: 15px;
        font-size: 12px;
      }
    }
    .top-right {
      span {
        margin-left: 20px;
        font-size: 12px;
      }
    }
  }
  .login-body {
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    .logo{
      span {
        font-size: 24px;
        color: $red;
        &:before {
          content: '';
          width: 150px;
          height: 100px;
          background: url(../assets/img/login/timg1.jpg) no-repeat;
          display: inline-block;
          background-size: 100% 100%;
          vertical-align:middle;
          margin-right: 5px;
        }
      }
    }
    .serch {
      .serch-input {
        width: 400px;
        border-color: #B61D1D;
        font-size: 14px;
        color: #666;
        margin-bottom: 4px;
      }
      .button {
        background-color: #B61D1D;
        font-size: 16px;
        color: #fff;
        font-weight: bold;
        border: 0px;
      }
    }
    .erweima {
      img {
      display: inline-block;
      vertical-align: middle;
      }
    }
  }
  .login-nav {
    height: 39px;
    line-height: 39px;
    vertical-align: middle;
    width: 100%;
    background-color: #000;
    position: sticky;
    top: 0px;
    z-index: 999;
    span {
      color: #fff;
      width: 110px;
      text-align: center;
      &:hover {
        color: #B61D1D;
        background-color: #f3f3f3;
        cursor: pointer;
      }
    }
  }
  .login-bg {
    height: 460px;
    background: url(../assets/img/login/login_bg.jpg) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 20px;
    .form-box {
      margin-left: 450px;
      background: #fff;
      height: 71.5%;
      width: 22%;
      .title {
        padding-bottom: 30px;
        padding-top: 20px;
        color: #9b9b9b;
        font-weight: bolder;
        h3 {
          font-size: 18px;
        }
      }
      .form-body {
        .input {
          width: 300px;
        }
      .verifi {
        width: 185px;
      }
        .QQ {
          color: #666666;
          font-size: 12px;
          &:before {
            content: '';
            background: url(../assets/img/login/QQ.png) no-repeat;
            background-size: 100% 100%;
            height: 30px;
            width: 30px;
            display: inline-block;
            vertical-align: middle;
            margin: 0px 5px 0px 10px;
          }
        }
        .WX {
          color: #666666;
          font-size: 12px;
          &:before {
            content: '';
            background: url(../assets/img/login/wechat.png) no-repeat;
            background-size: 100% 100%;
            height: 30px;
            width: 30px;
            display: inline-block;
            vertical-align: middle;
            margin: 0px 5px 0px 10px;
          }
        }
        p {
          font-size: 14px;
          margin-left: 15px;
          color: $red;
        }
        span {
          font-size: 12px;
          }
        .register {
          color: $red;
          margin-left: 10px;
          cursor: pointer;
        }
        .findpwd {
          margin-left: 170px;
          color: $red;
          cursor: pointer;
        }
        .login-btn {
          margin-top: 5px;
          width: 300px;
        }
      }
    }
  }
  .login-server {
    height: 204px;
    ul {
      margin-left: 200px;
      h3 {
        display: block;
        font-size: 14px;
        margin-bottom: 5px;
        color: #575757;
      }
      li {
        color: #848484;
      }
    }
    .login-server-right {
      h2 {
        width: 200px;
        font-size: 22px;
        color: #c1111c;
      }
      p {
        width: 200px;
        font-size: 16px;
        margin: 15px 0;
      }
    }
  }
  .el-divider--vertical {
      display: inline-block;
      width: 1px;
      height: 1em;
      margin: 0 8px;
      vertical-align: middle;
      position: relative;
  }
  .footer-img {
    width: 100%;
    height: 100%;
    background-color: #1a1d1f;
    margin-bottom: 40px;
  }
  .footer {
    text-align: center;
    color: #848484;
    font-size: 12px;
    ul {
      margin-bottom: 15px;
      li {
        cursor: pointer;
        display: inline;
        .dl {
          height: 1rem;
        }
      }
    }
  }
</style>
